﻿<template>
  <div class="income_percent">
  	
  	<div class="income_box" :style="{width: 100 / rols +'%'}" v-for="item in incomeData">
  		<div class="title">
  			<span class="text">{{item.text}}</span>
  			<span class="percent">{{item.percent}}</span>
  		</div>
  		<div class="progress">
  			<div class="bar" :style="{background: item.color||'#8492A6', width: item.percent||0}"></div>
  		</div>
  	</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  computed: {
  	rols () {
  		let length = this.incomeData.length;
  		console.log(length);
  		console.log(Math.ceil(length / 7));
  		return Math.ceil(length / 7); 
  	}
  },
  props: {
  	incomeData: {
  		default: {}
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.income_percent
	overflow: hidden;		
	padding: 15px 0;
	.income_box	
		box-sizing: border-box;
		padding: 0 15px;
		float: left;
		width: 100%;
		height: 40px;
		.title			
			height: 20px;
			line-height: 100%;
			.text
				font-size: 12px;
				float:left;
				color: #475669;
			.percent
				font-size: 12px;
				float:right;
				color: #99A9BF;				
		.progress
			width: 100%;
			height: 6px;
			background: #D8D8D8;
			border-radius: 3px;
			overflow: hidden;
			.bar
				width: 20%;
				height: 6px;
				background: #56BD5B;;
</style>
